<template>
  <view class="index-container">
    <view class="f-t">
      <u-navbar :is-back="false" :background="background">
        <view class="u-flex u-row-around" style="background-color: #ff0025">
          <u-icon
            name="iconnew"
            custom-prefix="iconfont"
            size="100"
            color="#fff"
          ></u-icon>
          <u-search shape="round" :show-action="false"></u-search>
          <u-icon
            name="iconwode"
            custom-prefix="iconfont"
            size="50"
            color="#fff"
          ></u-icon>
        </view>
      </u-navbar>
      <!-- 频道列表 -->
      <view class="header-tabs">
        <u-tabs
          :list="list"
          active-color="#ff0025"
          inactive-color="#606266"
          font-size="30"
          :current="current"
          @change="change"
        ></u-tabs>
        <view class="plus">+</view>
      </view>
    </view>
    <!-- 主要内容 -->
    <view class="main-content">
      <content-list
        v-for="item in contentLists"
        :key="item.id"
        :item="item"
      ></content-list>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      contentLists: [],
      current: 0,
      page: {
        pageIndex: 1,
        pageSize: 5,
        category: 1,
        total: 0,
      },
    };
  },
  onLoad() {
    this.getChannelLists();
  },
  methods: {
    async getChannelLists() {
      const { data } = await this.$u.get('/category');
      this.list = data;
      this.getContentLists();
    },
    async getContentLists() {
      const { data, total } = await this.$u.get('/post', {
        ...this.page,
        category: this.list[this.current].id,
      });
      this.contentLists = [...this.contentLists, ...data];
      this.page.total = total;
    },
    change(index) {
      this.current = index;
      this.contentLists = [];
      this.page.pageIndex = 1;
      this.getContentLists();
    },
  },
  // 触底事件
  onReachBottom() {
    if (this.page.total > this.contentLists.length) {
      this.page.pageIndex++;
      this.getContentLists();
    } else {
      uni.showToast({ title: '没有更多的数据了', icon: 'none' });
    }
  },
  async onPullDownRefresh() {
    this.page.pageIndex = 1;
    await this.getChannelLists();
    this.contentLists = this.contentLists.sort((a, b) => 0.5 - Math.random());
    uni.stopPullDownRefresh();
  },
};
</script>

<style lang="scss">
.header-tabs {
  position: relative;
  height: 80rpx;
  .plus {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 100rpx;
    line-height: 65rpx;
    width: 100rpx;
    height: 80rpx;
    background-color: #eee;
    color: rgba(0, 255, 0, 0.5);
    text-align: center;
  }
}
.f-t {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 999;
}

.main-content {
  padding-top: 228rpx;
}
</style>
